<template>
	<view>
		<view class="navbar">
			<view class="iconfont fontstyle" @click="gotoback">&#xe616;</view>
			<text class="navtitle">订单详情</text>
			<view class="bill" @click="cancelOrder">取消订单</view>
		</view>
		<!--订单提示-->
		<view class="ordertip">
			<view class="loading">待支付...</view>
			<view>请尽快完成支付，订单超过30分钟将自动取消</view>
		</view>
		<!--订单详情-->
		<view class="detailinfo" v-if="detail.info">
			<view class="detailitem">
				<text class="title">订单名称：</text>
				<text>三网通话费充值</text>
			</view>
			<view class="detailitem">
				<text class="title">订单编号：</text>
				<text>{{detail.info.id}}</text>
			</view>
			<view class="detailitem">
				<text class="title">充值面额：</text>
				<text>¥{{detail.info.card_num}} 元</text>
			</view>
			<view class="detailitem">
				<text class="title">充值号码：</text>
				<text>{{detail.info.phone}}</text>
			</view>
			<view class="detailitem" v-if="detail.coupon">
				<text class="title">实际支付：</text>
				<view class="font-bolds">¥{{detail.info.card_num-detail.coupon.amount<=0?0:detail.info.card_num-detail.coupon.amount}}
					元</view>
			</view>

			<view class="detailitem" v-else>
				<text class="title">实际支付：</text>
				<view class="font-bolds">¥{{detail.info.actual_amount*0.8}}+{{detail.info.actual_amount-detail.info.actual_amount*0.8}}<text
					 class="font-colors">(赠送金额)</text>
					元</view>
			</view>

			<view class="detailitem">
				<text class="title">支付方式：</text>
				<text>{{detail.coupon?'优惠券':'账户余额'}}支付</text>
			</view>
			<view class="detailitem" v-if="detail.coupon">
				<text class="title">优惠券面值：</text>
				<text class="font-bolds">¥{{detail.coupon.amount}} 元</text>
			</view>
			<view class="detailitem">
				<text class="title">订单创建时间：</text>
				<text>{{detail.info.add_time}}</text>
			</view>
			<view class="line"></view>

			<view class="detailitem">
				<text class="title">{{detail.coupon?'优惠券':'余额'}}抵扣：</text>
				<view><text class="font-colors">- ¥{{detail.coupon?detail.coupon.amount:detail.info.actual_amount}} 元</text></view>
			</view>
			<view class="detailitem" v-if="detail.coupon">
				<text class="title">需额外微信支付：</text>
				<text>¥ {{detail.info.card_num-detail.coupon.amount<=0?0:detail.info.card_num-detail.coupon.amount}} 元</text>
			</view>
			<view class="detailitem" v-else>
				<text class="title">账户总额：</text>
				<text>¥ {{prestore_balance-detail.info.actual_amount}} 元</text>
			</view>

			<view class="rule">
				<text>支付前请您仔细阅读相关</text>
				<navigator url="/pages/article/index?key=5f59d8b356d02" class="tiaozhuan">《预存话费规则》</navigator>
			</view>
		</view>

		<view class="comfir" @click="odercomfir">确认支付</view>
		<!--加载遮罩-->
		<loadingpage v-if="globelloading"></loadingpage>
	</view>
</template>

<script>
	/**
	 * 充值详情页
	 */
	export default {
		data() {
			return {
				globelloading: true,
				detail: {},
				userinfo: '',
				prestore_balance: '',
				order_id: '',
			}
		},
		onLoad(option) {
			this.orderdatail(option.order_id)
			this.order_id = option.order_id
			this.prestore_balance = option.prestore_balance //账户余额
			this.userinfo = uni.getStorageSync('user_info')
		},
		//监听页面返回事件
		// onBackPress() {
		// 	return true
		// },
		watch: {
			detail() {
				this.globelloading = false
			}
		},
		methods: {
			//确认下单
			odercomfir() {
				uni.showModal({ //提醒用户更新
					title: "提示",
					content: "您是否已核对订单详情？",
					showCancel: true,
					success: (ret) => {
						if (ret.confirm) {
							this.$HttRequest({
								url: '/recharge/payment',
								param: {
									id: this.order_id,
								}
							}, 'POST', true).then((ret) => {
								console.log(ret);
								if (ret.status === 10000) {
									//卡券充值
									if (this.detail.coupon) {
										//发起微信支付或直接支付
										if (ret.data.pay) {
											this.requestpay(ret.data.pay);
										} else {
											this.$ShowMsg('充值成功！');
											setTimeout(() => {
												uni.redirectTo({
													url: "/pages/recharge/recording"
												})
											}, 2000)
										}
									} else {
										//余额充值
										this.$common.state.userrecharge = ret.data;
										this.$ShowMsg('充值成功！');
										setTimeout(() => {
											uni.redirectTo({
												url: "/pages/recharge/recording"
											})
										}, 2000)
									}

								} else {
									this.$ShowMsg(ret.message)
								}
							}).catch((error) => {
								//异常错误
								this.$ShowMsg('statusCode：' + JSON.stringify(error));
							})
						}
					}
				})
			},
			//发起微信支付
			requestpay(paydata) {
				let that = this
				uni.requestPayment({
					provider: "wxpay",
					orderInfo: paydata,
					success() {
						that.$ShowMsg('付款成功！');
						setTimeout(() => {
							uni.redirectTo({
								url: "/pages/recharge/recording"
							})
						}, 2000)
					},
					fail(error) {
						that.$ShowMsg('订单已取消，充值失败！')
						setTimeout(() => {
							uni.redirectTo({
								url: "/pages/recharge/recording"
							})
						}, 2000)
					}
				})
			},
			//取消订单
			cancelOrder() {
				uni.showModal({ //提醒用户更新
					title: "提示",
					content: "如订单使用优惠券可直接返还用户，确认取消嘛？",
					showCancel: true,
					success: (ret) => {
						if (ret.confirm) {
							this.$HttRequest({
								url: '/recharge/cancelOrder',
								param: {
									id: this.order_id,
								}
							}).then((ret) => {
								console.log(ret)
								if (ret.status === 10000) {
									if(this.detail.coupon){
										this.$common.state.couponlist = ret.data
									}
									this.$ShowMsg('订单取消成功！')
									setTimeout(() => {
										uni.redirectTo({
											url: "/pages/recharge/recording"
										})
									}, 2000)
								} else {
									this.$ShowMsg(ret.message)
								}
							}).catch((error) => {
								//异常错误
								this.$ShowMsg('statusCode：' + error.errMsg);
							})
						}
					}
				})
			},

			gotoback() {
				uni.navigateBack({
					delta: 1,
				})
			},
			//查询订单详情
			orderdatail(order_id) {
				console.log(order_id)
				this.$HttRequest({
					url: '/recharge/orderInfo',
					param: {
						id: order_id,
					}
				}).then((ret) => {
					//console.log(ret)
					if (ret.status === 10000) {
						this.detail = ret.data
					} else {
						this.$ShowMsg(ret.message)
						setTimeout(() => {
							uni.redirectTo({
								url: "/pages/recharge/recording"
							})
						}, 2000)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url('/static/image/paybg.png');
		background-size: 100% 672rpx;
		background-repeat: no-repeat;
		background-color: #f0f0f0;

	}

	.font-colors {
		font-weight: bold;
		color: #FF0000;
	}

	.comfir {
		width: 90%;
		margin: 40rpx auto;
		height: 85rpx;
		background-color: $uni-color-primary;
		border-radius: 50rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		border: 1rpx solid #5fb2ff;
		box-shadow: inset 0 0 15rpx 10rpx #2680fb;
	}

	.ordertip {
		display: flex;
		width: 90%;
		justify-content: center;
		align-items: flex-start;
		flex-direction: column;
		margin: 30rpx auto;
		font-size: 28rpx;
		color: #fff;

		.loading {
			font-weight: bold;
			font-size: 40rpx;
			margin: 10rpx 0;
		}
	}

	.detailinfo {
		border-radius: 30rpx;
		width: 80%;
		margin: 20rpx auto;
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 20rpx 40rpx;
		border-radius: 30rpx;
		background-color: #fff;
		font-size: 28rpx;
		color: #5c5c5c;

		.rule {
			color: #dadada;
			font-size: 28rpx;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 60rpx 0 10rpx 0;

			.tiaozhuan {
				color: $uni-color-primary;
			}
		}

		.detailitem {
			margin: 20rpx 0;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.font-bolds {

				font-weight: bold;
				font-size: 32rpx;
			}

			.title {
				font-weight: bold;
			}
		}

		.line {
			margin: 50rpx auto;
			width: 100%;
			height: 1rpx;
			background-color: #e0e0e0;
		}
	}

	.navbar {
		width: 95%;
		margin: 50rpx auto;
		margin-bottom: 0px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		color: #fff;

		.navtitle {
			margin-left: 55rpx;
			font-size: 38rpx;
		}

		.fontstyle {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 45rpx;
			color: #fff;
			transform: rotateY(180deg);
		}

		.bill {

			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
		}
	}
</style>
